<!--
 * @Author: yao
 * @Date: 2024-11-20 11:31:38
 * @LastEditTime: 2025-01-22 23:59:00
 * @LastEditors: yao
 * @Description: 
 * @FilePath: \jdev-web-el\src\Layouts\JMenu.vue
-->
<template>
  <el-aside width="auto" class="j_menu">
    <div class="menu_switch"
      v-if="(currentMenu && currentMenu.children && currentMenu.children.length > 0) || currentMenu.isFav"
      @click="switchMenu">
      <el-icon>
        <ArrowLeftBold v-if="isShowMenu" />
        <ArrowRightBold v-else />
      </el-icon>
    </div>
    <div class="menu_content">
      <div class="side_menu">
        <div class="menu_logo">
          <img src="@/assets/logo.png" />
        </div>
        <li class="menu_item">
          <el-tooltip effect="dark" content="主页" :show-after="500" placement="right-start">
            <el-icon class="text-2xl">
              <House />
            </el-icon>
          </el-tooltip>
        </li>
        <li class="menu_item" :class="{ 'menu_item_select': currentMenu.isFav }"
          @click="clickMenu({ isFav: true, id: -2, meta: { title: '收藏' } })">
          <el-tooltip effect="dark" content="收藏" :show-after="500" placement="right-start">
            <el-icon class="text-2xl">
              <Star />
            </el-icon>
          </el-tooltip>
        </li>
        <li class="menu_item" :class="{ 'menu_item_select': menu.meta.id === currentMenu?.meta?.id }"
          v-for="menu in userStore.menus" :key="menu.meta.id" @click="clickMenu(menu)">
          <el-tooltip effect="dark" :content="menu.meta.title" :show-after="500" placement="right-start">
            <el-icon class="text-2xl">
              <Reading />
            </el-icon>
          </el-tooltip>
        </li>
      </div>

      <div class="right_menu" :class="{ 'right_menu_show': isShowMenu }">
        <div class="main_title">
          <div style="font-size: 1.2rem;margin-bottom: 2px;">星辰·济世</div>
          <div style="font-size: .8rem;">大模型中台</div>
        </div>
        <div class="right_menu_content">
          <div class="sub_title">{{ currentMenu ? currentMenu.meta?.title : '' }}</div>
          <el-divider style="margin:1rem;" />
          <el-menu :popper-offset="0" size="small" default-active="2" style="border: none;" @open="handleOpen"
            @close="handleClose">
            <SubMenu :menuData="currentMenu.children"></SubMenu>
          </el-menu>
        </div>
      </div>
    </div>
    <div class="menu_footer"></div>
  </el-aside>
</template>
<script setup lang='ts'>
import { useUserStore } from '@/stores/modules/user';

import { ref } from 'vue';
import SubMenu from './SubMenu.vue';
import { useRouter } from 'vue-router';
const isShowMenu = ref(false)
const emits = defineEmits(["switch"]);
const switchMenu = (val) => {
  isShowMenu.value = !isShowMenu.value
}

const userStore = useUserStore()
const router = useRouter();
const currentMenu: any = ref({})


const clickMenu = (menu: any) => {
  currentMenu.value = menu
  if ((menu.children && menu.children.length > 0) || menu.isSearch || menu.isFav) {
    isShowMenu.value = true
  }
  emits('switch', menu.children && menu.children.length > 0)
}


</script>
<style scoped lang='scss'>
.j_menu {
  --ep-menu-item-height: 3rem;
  width: auto;
  box-sizing: border-box;
  position: relative;
  z-index: 999;
  flex-direction: column;
  display: flex;
  align-items: center;
  overflow: visible;
  background: rgba(255, 255, 255, 0.3); /* 半透明背景 */
  backdrop-filter: blur(20px); /* 毛玻璃效果 */
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: var(--ep-box-shadow);
  height: 100vh;
  .menu_switch {
    color: var(--ep-primary-color);
    padding: 10px 0;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    box-shadow: 3px 0 6px rgba(0, 0, 0, 0.1);
    background: var(--ep-bg-color);
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: -16px;
  }

  .menu_content {
    height: 100%;
    display: flex;

    .side_menu {
      z-index: 999;
      user-select: none;
      box-sizing: border-box;
      overflow-y: auto;
      list-style-type: none;
      list-style: none;
      // padding-left: 6px;

      .menu_item {
        color: #fff;
        --p-icon-size: 1.5rem;
        display: flex;
        height: 30px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        outline: none;
            margin: 0.65rem 0 0.65rem 0.5rem;
    padding: 0.45rem 1rem 0.45rem .6rem;
        font-size: 1rem;
        border-radius: 10px;
        transition: background-color .2s;
        border-top-left-radius: 9999px;
        border-bottom-left-radius: 9999px;
      }

      .menu_item:hover {
        background-color: #fff;
        color: var(--ep-menu-hover-text-color)
      }

      .menu_item_select {
        background-color: #fff;
        color: var(--ep-menu-hover-text-color)
      }
    }


    .right_menu {
      display: flex;
      flex-direction: column;
      width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transition: width 0.2s ease-in-out;

      .main_title {
        padding: 1rem 1rem 1rem 0;
        color: white;
        text-align: left;
        font-weight: 600;
        text-align: justify;
        text-align-last: justify;
      }

      .right_menu_content {
        background-color: var(--ep-bg-color);
        border-top-left-radius: 24px;
        border-bottom-right-radius: 24px;
        font-size: 1rem;
        font-weight: 500;
        flex-grow: 1;
      }
    }

    .sub_title {
      font-weight: 700;
      text-align: center;
      padding-top: 20px;
    }

    .right_menu_show {
      width: 170px;
      height: 100%;
      border-left: 1px solid var(--surface-border);
      transition: width 0.2s ease-in-out;
    }
  }


  .menu_logo {
    width: 100%;
    padding-top: 1.4rem;
    text-align: center;
    margin-bottom: 3rem;
  }
}
</style>